import React from 'react'


/*
    条件渲染
    类似vue中v-if、v-else-if、v-else实现条件渲染

    实现单一元素的条件渲染：使用&&短路符号运算符或者！取反运算符来实现

    实现两个元素的条件渲染：使用三元表达式来实现。

    实现多元素的条件渲染：使用&&短路运算符或者自定义封装switch语句的函数来实现。(根据运算条件返回相应的JSX对象即可)


*/
/*
    二，动态样式
    使用动态样式技术，可以实现类似vue中的v-show功能.

    如果使用的是动态className,实际上是根据条件计算得到响应类名的切换

    如何使用的是动态style，实际是根据条件计算得到一个类是这样的对象

*/


export default class TestCondition extends React.Component{
    constructor(props){
        super(props)
        this.state={
            bol1:true,
            bol2:true,//两个显示与隐藏
            bol3:1,//多个显示与隐藏
            change:'1',//改变类名
            improveFont:{
                fontSize:'16px'
            },
            show2:true,//样式显示与隐藏
        }
    }
    //单个
    toggle(){
        this.setState(state=>({bol1:!state.bol1}))
    }
    //两个
    toggle2(){
        this.setState(state=>({bol2:!state.bol2}))
    }
    // 多个
    toggle3(){
        this.setState(state=>{
            var newBol = state.bol3 + 1 > 4 ? 1 : state.bol3 + 1
            return{
                bol3: newBol
            }
          }
        )
    }
    toggle4(){
        this.setState(state=>({show2:!state.show2}))
    }
    //多个渲染视图
    renderView(){
        var ele=null
        var {bol3}=this.state
        switch(bol3){
            case 1:
            ele=<h2>高中</h2>
            break
            case 2:
            ele=<h2>大学</h2>
            break
            case 3:
            ele=<h2>本科</h2>
            break
            case 4:
            ele=<h2>研究生</h2>
            break
        }
        return ele
    }
    //改变类名
    changeClass(){
        this.setState(state=>{
            var newChange = state.change + 1 > 4 ? 1 : state.change + 1
            return{
                change: newChange
            }
        })
    }
    //增大字体
    upFont(){
        this.setState(state=>{
            let newFont=parseInt(state.improveFont.fontSize.split('px')[0]) +1
            return{
                improveFont:{
                    fontSize:newFont+'px'
                }
            }
        })
    }
    render(){
        let{
            bol1,
            bol2,
            change,
            improveFont,
            show2//样式显示与隐藏
        }=this.state
        return(
            <div>
                <h1>学习条件渲染和动态样式</h1>
                <hr />
                {/* 单个元素的显示与隐藏 */}
                {
                   bol1&&<h3>我是一行可有可无</h3>
                }
                <button onClick={()=>this.toggle()}>toggle</button>
                <hr />
                {/* 两个元素的显示与隐藏 */}
                {
                    bol2 ? <h2>白天</h2> : <h2>黑夜</h2>
                }
                <button onClick={() => this.toggle2()}>toggle2</button>
                {/* 多个元素的显示与隐藏 */}
                {this.renderView()}
                <button onClick={() => this.toggle3()}>toggle3</button>
                <hr />
                {/* 动态class样式 */}
                <h2 className={'c'+change} onClick={()=>this.changeClass()}>点我会变身</h2>
                {/* 动态style */}
                <h1 style={improveFont} onClick={()=>this.upFont()}>你点我字体会变大</h1>
                {/* 模仿vue的v-show */}
                <h3 style={{
                    color:'pink',
                    display:show2?'block':'none'
                }}>我是一行可有可无</h3>
                <button onClick={() => this.toggle4()}>toggle4</button>
            </div>
        )
    }
}